<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        // jq  dom操作
        // jq  动画操作
        //   hide()  show()   toggle()   没有动画  display:none/block
        //   fadeIn()  fadeOut()   fadeToggle()   主要是透明度的变化  display:none/block
        //   slideUp()  slideDown()   slideToggle()

        //   animate({} , time , cb)   stop()   停止动画


        // jq 内容操作
        //   html()
        //   text()
        //   val()


        // jq 属性操作
        //   attr()
        //   prop()


        // jq样式操作
        //   css()
        //   addClass()
        //   removeClass()
        //   toggleClass()
        //   hasClass()


        // jq事件
        //   click()
        //   on()    addEventListener
        //   off()   removeEventListener
        //   hover()   组合事件
        //   ready() 


        // eq
        // index


        // 原生js中onload是指页面资源加载完毕
        // jq中的ready是指文档准备就绪  --- 不需要管文件资源是否请求到位



        // $('button').css('fontSize', 300)
        // $('button').animate({
        //     width: '200px',
        //     height: 200,    // 可以不加单位
        //     // color: '#ff0'
        // }, 2000, function () {
        //     console.log('动画以结束')
        // })
        // $('button').click(function () {
        //     // // $('.a').toggle()
        //     // // $('.a').fadeToggle()
        //     // $('.a').slideToggle(2000, function () {
        //     //     console.log(666)
        //     // })

        //     $(this).stop()

        // })

        // onload是指页面资源加载完毕
        // ready是指文档准备就绪  --- 不需要管文件资源是否请求到位


        $(document).ready(function () {
            // $('button').hover(function () {
            //     $(this).css('fontSize', 20)
            // }, function () {
            //     $(this).css('fontSize', 16)
            // })



            $('button').on('click', function () {
                console.log(111);
            })


            setTimeout(() => {
                $('button').off('click')
            }, 2000)


            // remove  删除包含自己
            // empty   ====   innerHTML = ''
            // $('.box').empty()


        })

        // 在js中  等到页面资源加载完毕
        window.onload = function () {

        }



    </script>
</head>

<body>

    <button>1</button>

    <div class="a">11</div>

    3333333333

    <img src="" alt="">

    <img src="" alt="">


    <div class="box">
        <p>11</p>
        <p>22</p>

        <h3>
            <span>33333</span>
        </h3>
    </div>


</body>

</html>